import React, { lazy, Suspense } from 'react';
import { Redirect } from 'react-router-dom';
import Tabbar from '../components/tabbar/Tabbar';
import Detail from '../pages/detail';
import Loading from '@/baseUI/loading';
const Home = lazy(()=> import('../pages/home'));
const User = lazy(()=>import('../pages/user'));
const Classify = lazy(()=>import('../pages/classify'));
const Search = lazy(()=>import('../pages/search'));
const ShoppingCart = lazy(()=>import('../pages/shoppingCart'));

const SuspenseComponent = Component => props => {
    return (
        <Suspense fallback={<div style={{"position":"fixed",top:"50%",left:"50%"}}><Loading /></div>}>
            <Component {...props}></Component>
        </Suspense>
    )
}

export default [{
    component: Tabbar,
    routes:[
        {
            path:'/',
            exact: true,
            render: () => <Redirect to = { "/home" }/>,
        },
        {
            path:'/home',
            component: SuspenseComponent(Home),
            exact:true,
            routes: [
                {
                    path: '/home',
                    exact: true
                }
            ]
        },
        {
            
            path:'/classify',
            component:SuspenseComponent(Classify),
            exact:true
        },
        {
            path:'/shoppingCart',
            component:SuspenseComponent(ShoppingCart),
            exact:true
        },
        {
            path:'/user',
            component: SuspenseComponent(User),
        },
        {
            path:'/search',
            component: SuspenseComponent(Search),
            exact:true
        },
        {
            path:'/classifyList/:type',
            // component:SuspenseComponent(User)
            render:()=><div>to be continue ...</div>
        },
        {
            path:'/detail/:id',
            component:SuspenseComponent(Detail)
        }

    ]
}]

